<template>
  <div class="box-padding">
    <div class="chart" id="chart" style="width:80px; height:80px"></div>
  </div>
</template>

<script>
import Charts from '@jiaminghi/charts'
export default {
  name: '',
  data() {
    return {}
  },
  props: {
    data: {
      type: String,
      default: '',
    },
  },

  watch: {
    data() {
      this.line()
    },
  },
  methods: {
    line() {
      const chart = document.getElementById('chart')
      const myChart = new Charts(chart)
      const option1 = {
        series: [
          {
            type: 'gauge',
            max: 100,
            startAngle: -Math.PI / 2,
            endAngle: Math.PI * 1.5,
            arcLineWidth: 5,
            center: ['50%', '45%'],
            data: [
              {
                name: '今日保养计划',
                value: this.data,
                gradient: ['#03c2fd'],
              },
            ],
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            pointer: {
              show: false,
            },
            dataItemStyle: {
              lineCap: 'round',
            },
            backgroundArc: {
              style: {
                fill: '#999',
                opacity: 0.2,
              },
            },
            details: {
              show: true,
              formatter: '{value}',
              style: {
                fill: '#fff',
                fontSize: 14,
                fontWeight: 'normal',
              },
            },
          },
        ],
      }
      myChart.setOption(option1)
      //图表自适应
      window.addEventListener('resize', function() {
        myChart.resize()
      })
    },
  },
}
</script>

<style scoped>
.chart {
  height: 20vh;
  width: 100%;
}
.title {
  font-size: 1.7rem;
  position: absolute;
  right: 10%;
  top: 2rem;
  letter-spacing: 2px;
}
</style>
